<template>
  <div class="pac-personal-detail">
    <div class="content-divider first">
      <div class="clearfix">
        <div class="number">01</div>
        <div class="divider-title">基本信息<br />Essential information</div>
        <div class="bg"></div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="source-item">
          <div class="source-title linear-blue">API名称</div>
          <div class="source-content">
            {{ apiInfo.apiNm }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-purpose">请求方式</div>
          <div class="source-content">
            {{ $dict('$api_request_type')[apiInfo.apiReqType] }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-purpose">格式结果</div>
          <div class="source-content">
            {{ apiInfo.apiRespFormat === 1 ? 'JSON' : 'FORMDATA' }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-green" style="padding-left: 40px">数据平台个数</div>
          <div class="source-content">
            {{ apiInfo.apiType === 1 ? '单个' : '多个' }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-green">请求路径</div>
          <div class="source-content">
            <el-input v-model="apiInfo.apiUrl" disabled class="scroll-input"></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-yellow">应用平台</div>
          <div class="source-content">
            {{ apiInfo.appPlfmNm }}
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-yellow">数据平台</div>
          <div class="source-content">
            <el-input v-model="apiInfo.dataPlfmNm" disabled class="scroll-input"></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-red">APPKEY</div>
          <div class="source-content">
            <el-input v-model="apiInfo.appKey" readonly>
              <template slot="suffix">
                <span>
                  <el-tooltip effect="dark" content="拷贝到剪切板" placement="top">
                    <i class="el-icon-copy-document appkey"></i>
                  </el-tooltip>
                </span>
              </template>
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="source-item">
          <div class="source-title linear-red" style="padding-left: 40px">APPSECRET</div>
          <div class="source-content">
            <el-input v-model="apiInfo.appSecret" readonly :type="showAppSecret ? '' : 'password'">
              <template slot="suffix">
                <i class="el-icon-view" @click="showAppSecret = !showAppSecret"></i>
                <el-tooltip effect="dark" content="拷贝到剪切板" placement="top">
                  <i class="el-icon-copy-document appsecret"></i>
                </el-tooltip>
              </template>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="source-item">
          <div class="source-title linear-purpose">全局TOKEN</div>
          <div class="source-content">
            <el-input v-model="apiInfo.appGlobalToken" readonly :type="showToken ? '' : 'password'">
              <template slot="suffix">
                <i class="el-icon-view" @click="showToken = !showToken"></i>
                <el-tooltip effect="dark" content="拷贝到剪切板" placement="top">
                  <i class="el-icon-copy-document appGlobalToken"></i>
                </el-tooltip>
              </template>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="source-item desc-item">
          <div class="source-title linear-cyan">API说明</div>
          <div class="source-content tag-scrollbar">
            <el-input v-model="apiInfo.apiDesc" type="textarea" :rows="6" resize="none" disabled></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="content-divider second">
      <div class="clearfix">
        <div class="number">02</div>
        <div class="divider-title">参数信息<br />Parameter information</div>
        <div class="bg"></div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="source-item params-item">
          <div class="source-title">
            <span><icon-svg name="iconArts"></icon-svg></span><br />
            参数信息
          </div>
          <div class="source-content" v-if="apiInfo.apiReqContext.length">
            <textarea id="api-req-test"></textarea>
            <!-- <el-input v-model="apiInfo.apiReqContext" type="textarea" :rows="6" resize="none" disabled></el-input> -->
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="content-divider third">
      <div class="clearfix">
        <div class="number">03</div>
        <div class="divider-title">返回结果<br />Return result</div>
        <div class="bg"></div>
      </div>
    </div>
    <div class="result-wrap">
      <el-row class="result-title">
        <el-col :span="8">Code</el-col>
        <el-col :span="16">Description</el-col>
      </el-row>
      <div v-for="(item, index) in apiInfo.apiRespContext" :key="index" class="result-item">
        <el-row>
          <el-col :span="8" align="center">
            {{ item.code }}
          </el-col>
          <el-col :span="15">
            <div class="bg-text">{{ item.desc }}</div>
            <template v-if="item.code === 200">
              <p>Example Value</p>
              <textarea id="api-resp-test"></textarea>
              <!-- <el-input v-model="item.example" type="textarea" :rows="10" resize="none" disabled></el-input> -->
            </template>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import clipboard from 'clipboard'
import CodeMirror from 'codemirror'
export default {
  props: {
    ids: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      showAppSecret: false,
      showToken: false,
      apiInfo: {
        apiNm: '',
        apiUrl: '',
        apiReqType: '',
        apiRespFormat: '',
        apiType: '',
        apiDesc: '',
        apiReqContext: '',
        apiRespContext: [{ code: 200, desc: 'OK', example: '' }],
        appPlfmNm: '',
        dataPlfmNm: '',
        appKey: '',
        appSecret: '',
        appGlobalToken: ''
      },
      secretboard: null,
      keyboard: null,
      tokenboard: null,
      apiReqEditor: null,
      apiRespEditor: null
    }
  },
  methods: {
    getInfo() {
      this.$ajax({
        url: this.$ajax.setUrl(`pac/pacAppApi/${this.ids.appId}/${this.ids.apiId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.apiInfo.apiNm = data.data.apiNm
          this.apiInfo.apiUrl = data.data.apiUrl
          this.apiInfo.apiReqType = data.data.apiReqType
          this.apiInfo.apiRespFormat = data.data.apiRespFormat
          this.apiInfo.apiType = data.data.apiType
          this.apiInfo.apiDesc = data.data.apiDesc
          this.apiInfo.apiReqContext = data.data.apiReqContext
          this.apiInfo.apiRespContext = JSON.parse(data.data.apiRespContext)
          this.apiInfo.appPlfmNm = data.data.appPlfmNm
          let dataPlfmNm = []
          data.data.dataPlfm.forEach(item => dataPlfmNm.push(item.plfmNm))
          this.apiInfo.dataPlfmNm = dataPlfmNm.join(',')
          this.apiInfo.appKey = data.data.appKey
          this.apiInfo.appSecret = data.data.appSecret
          this.apiInfo.appGlobalToken = data.data.appGlobalToken
          this.$nextTick(() => this.initText())
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    initText() {
      if (this.apiInfo.apiReqContext.length) {
        if (!this.apiReqEditor) {
          this.apiReqEditor = CodeMirror.fromTextArea(document.getElementById('api-req-test'), {
            mode: 'application/json',
            lineWrapping: true,
            foldGutter: true,
            readOnly: 'nocursor',
            gutters: ['CodeMirror-foldgutter']
          })
        }
        this.apiReqEditor.setValue(this.apiInfo.apiReqContext)
        this.apiReqEditor.refresh()
      }
      if (!this.apiRespEditor) {
        this.apiRespEditor = CodeMirror.fromTextArea(document.getElementById('api-resp-test'), {
          mode: 'application/json',
          lineWrapping: true,
          foldGutter: true,
          readOnly: 'nocursor',
          gutters: ['CodeMirror-foldgutter']
        })
      }
      let resp = this.apiInfo.apiRespContext.find(item => item.code === 200)
      this.apiRespEditor.setValue(resp.example)
      this.apiRespEditor.refresh()
    },
    initKeybord() {
      this.$nextTick(() => {
        if (!this.keyboard) {
          this.keyboard = new clipboard('.appkey', {
            text: () => {
              this.$message.success('拷贝成功')
              return this.apiInfo.appKey
            }
          })
        }
        if (!this.secretboard) {
          this.secretboard = new clipboard('.appsecret', {
            text: () => {
              this.$message.success('拷贝成功')
              return this.apiInfo.appSecret
            }
          })
        }
        if (!this.tokenboard) {
          this.tokenboard = new clipboard('.appGlobalToken', {
            text: () => {
              this.$message.success('拷贝成功')
              return this.apiInfo.appGlobalToken
            }
          })
        }
      })
    },
    clearForm() {
      this.apiInfo.apiNm = ''
      this.apiInfo.apiUrl = ''
      this.apiInfo.apiReqType = ''
      this.apiInfo.apiRespFormat = ''
      this.apiInfo.apiDesc = ''
      this.apiInfo.apiReqContext = ''
      this.apiInfo.apiRespContext = ''
      this.apiInfo.appPlfmNm = ''
      this.apiInfo.dataPlfmNm = ''
      this.apiInfo.appKey = ''
      this.apiInfo.appSecret = ''
      this.apiInfo.appGlobalToken = ''
      if (this.keyboard) {
        this.keyboard.destroy()
        this.keyboard = null
      }
      if (this.secretboard) {
        this.secretboard.destroy()
        this.secretboard = null
      }
      if (this.tokenboard) {
        this.tokenboard.destroy()
        this.tokenboard = null
      }
      if (this.apiReqEditor) {
        this.apiReqEditor.toTextArea()
        this.apiReqEditor = null
      }
      if (this.apiRespEditor) {
        this.apiRespEditor.toTextArea()
        this.apiRespEditor = null
      }
    }
  }
}
</script>

<style lang="scss">
.pac-personal-detail {
  .source-item {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    &.desc-item {
      height: 153px;
      .source-title {
        line-height: 153px;
      }
      .source-content {
        .el-textarea {
          height: 153px;
        }
        .el-textarea__inner {
          padding-left: 0;
        }
        .el-textarea.is-disabled .el-textarea__inner {
          border: 0;
        }
      }
    }
    .source-title {
      font-weight: bold;
      width: 150px;
      height: 100%;
      padding-left: 50px;
      line-height: 45px;
      color: #fff;
      position: absolute;
      z-index: 2;
      &:before {
        width: 10px;
        height: 10px;
        content: '';
        background-color: #eee9ff;
        border: 2px solid #cfc7ee;
        margin-top: -5px;
        position: absolute;
        top: 50%;
        left: 20px;
        border-radius: 50%;
      }
      &:after {
        width: 0;
        height: 0;
        content: '';
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
      }
      &.linear-blue:after {
        border-left: 10px solid #635fd7;
      }
      &.linear-purpose:after {
        border-left: 10px solid #7c6bed;
      }
      &.linear-green:after {
        border-left: 10px solid #36b999;
      }
      &.linear-cyan:after {
        border-left: 10px solid #0696ec;
      }
      &.linear-yellow:after {
        border-left: 10px solid #f19849;
      }
      &.linear-red:after {
        border-left: 10px solid #c563ee;
      }
    }
    .source-content {
      line-height: 45px;
      padding-left: 170px;
      background-color: #f6f6f6;
      border: 1px solid #f0f0f0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .CodeMirror {
        height: 140px;
        line-height: normal;
        border: 1px solid #eee;
      }
    }
    .el-input .el-input__inner {
      height: 45px;
      line-height: 45px;
      border: 0;
      padding: 0 45px 0 0;
      color: rgba($color: #000000, $alpha: 0.85);
      background-color: #f6f6f6;
      cursor: default;
    }
    .scroll-input .el-input__inner {
      padding: 0;
    }
    .el-input__suffix {
      cursor: pointer;
      i + i {
        margin-left: 5px;
      }
    }
  }
  .params-item {
    height: 180px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    .source-title {
      width: 200px;
      padding-left: 0;
      color: #666;
      text-align: center;
      &:before {
        width: 5px;
        height: 100%;
        content: '';
        border: 0;
        margin-top: 0;
        background-color: #f2a85d;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0;
      }
      &:after {
        width: 1px;
        height: auto;
        margin-top: 0;
        content: '';
        background-color: #eee;
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
      }
      span {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: 45px;
        color: #fff;
        background-color: #f2a85d;
        text-align: center;
        border-radius: 50%;
        svg {
          width: 30px;
          height: 30px;
          margin-top: 10px;
        }
      }
    }
    .source-content {
      padding: 20px 20px 20px 200px;
      color: rgba($color: #000000, $alpha: 0.85);
      background-color: #fff;
    }
  }
  .result-wrap {
    .result-title {
      height: 40px;
      color: #fff;
      background-color: #38abf6;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      .el-col {
        height: 100%;
        & + .el-col {
          position: relative;
          &::after {
            width: 1px;
            height: 30px;
            content: '';
            background-color: #fff;
            position: absolute;
            top: 5px;
            left: 0;
          }
        }
      }
    }
    .result-item {
      margin-top: 20px;
      padding: 10px 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 2px 0 #eee, 0 0 6px #eee;
      &:before {
        width: 5px;
        content: '';
        background-color: #1e9ffe;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
      }
      p {
        font-weight: bold;
        color: 000;
        text-indent: 10px;
        margin: 10px 0;
      }
      .el-col-8 {
        padding: 10px 20px 0 20px;
      }
      .bg-text {
        padding: 10px;
        border: 1px solid #eee;
        background-color: #f6f6f6;
      }
    }
  }
  .el-textarea.is-disabled .el-textarea__inner {
    cursor: default;
    color: #333;
  }
}
</style>
